<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--<style>
    html, body {
      height: 100%;
    }

    header {
      height: 80%;
    }
  </style>-->

  <style>

    * {
      margin: 0;
      padding: 0;
    }

    header {
      /*height: 500px;!*fallback*!*/
      height: 80vh; /*如果浏览器不支持vh单位，则上面的500px可生效*/

      min-height: 300px;
      max-height: 1080px;

      background: url("./images/header-bg.jpg");
      background-position: 50% 0;
      background-repeat: no-repeat;
      background-size: cover;

      position: relative;

    }

    .header-text-container {
      text-align: center;
      color: white;
      text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);

      height: 100%;

      /*以下为新增样式*/
      /*height: 30%;*/
      /*width: 50%;*/

      /*position: absolute;*/
      /*top: 50%;*/
      /*left: 50%;*/

      /*margin: -15% 0 0 -25%;*/

      /*transform: translate(-50px,-50px);*/



    }

    .header-article_title {
      font-size: 100px;
    }

    .header-article_pub {
      display: block;
      font-size: 30px;
    }


  </style>

  <link rel="stylesheet" href="./css/flex.css">

</head>
<body>
<header>
  <div class="header-text-container flex-enable flex-column flex-justify-space-around">
    <div class="header-article_title">巨大的标题</div>
    <time class="header-article_pub">2015年3月10日</time>
  </div>
</header>
</body>
</html>
